import React from 'react'
import { Col, Button } from 'react-bootstrap'

import Cart from './Cart'

class Carts extends React.Component {
  constructor(props) {
    super(props)

  }

  handleCheckout(e) {
    this.props.checkout(this.props.price)
  }

  render () {
    const cartsList = this.props.products.map((product) => 
      <Cart product={product} key={product.id}></Cart>
    )
    return (
      <Col xs={8} xsOffset={2}>
        {cartsList}

        <br/><br/>
        <Col xs={4} xsOffset={4}>
          <Button bsStyle="danger" onClick={(e)=>{this.handleCheckout(e)}} block>下单</Button>
        </Col>
      </Col>
    )
  }
}

export default Carts